<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid实现数码题</title>
</head>
<style>
    .container{
    display: flex;
    width:100vw;
    height:100vh;
    .content{
        margin:auto;
        height: 430px;
        width:1420px;
        box-shadow:0 0 15px #ccc inset;
        border: 1px solid #ccc;
        /* //生成网格 */
        display: grid;
        /* //重复函数 生成八列100px的项目 */
        grid-template-columns:repeat(13,100px); 
        grid-auto-rows: repeat(4,100px);
        /* //行间距属性：grid-row-gap
        //列间距属性：grid-column-gap */
        grid-gap: 10px 10px;
        &>div{
            background: rgba(12, 127, 149, 0.74);
            border-radius: 5px;
        }
        /* // place-content: center center; */
        .box1{
            grid-column: 1/3;
            grid-row: 2/2;
            background: rgba(181, 51, 233, 0.504);
        }
        .box2{
            grid-column: 1/3;
            grid-row: 3/5;
            background: rgba(181, 51, 233, 0.504);
        }
        .box3{
            grid-column: 6/9;
            grid-row:2/4;
            background: rgba(181, 51, 233, 0.504);
        }
        .box13{
            grid-column: 10/12;
            background: rgba(181, 51, 233, 0.504);
        }
        .box14{
            grid-row: 1/3;
            grid-column: 12/14;
            background: rgba(181, 51, 233, 0.504);
        }
        .box38{
            grid-row:4/5;
            grid-column: 12/14;
            background: rgba(181, 51, 233, 0.504);
        }
       
    }
}
</style>
<body>
    <div  class="container">
        <div class="content">
           <div class="box1">1</div>
           <div class="box2">2</div>
           <div class="box3">3</div>
           <div class="box4">4</div>
           <div class="box5">5</div>
           <div class="box6">6</div>
           <div>7</div>
           <div>8</div>
           <div>9</div>
           <div>10</div>
           <div>11</div>
           <div>12</div>
           <div class="box13">13</div>
           <div class="box14">14</div>
           <div class="box15">15</div>
           <div>16</div>
           <div>17</div>
           <div>18</div>
           <div>19</div>
           <div>20</div>
           <div>21</div>
           <div>22</div>
           <div>23</div>
           <div>24</div>
           <div>25</div>
           <div>26</div>
           <div>27</div>
           <div>28</div>
           <div>29</div>
           <div>30</div>
           <div>31</div>
           <div>32</div>
           <div>33</div>
           <div>34</div>
           <div>35</div>
           <div>36</div>
           <div>37</div>
           <div class="box38">38</div>
        </div>
    
    </div>
</body>
</html>